<template>
  <div class="visitor-container">
    <div class="top-item-group">
      <div class="top-select-group">
        <el-select v-model="statusValue" clearable placeholder="全部状态">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select v-model="priorityValue" clearable placeholder="全部优先级">
          <el-option
            v-for="item in priorityOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select v-model="partitionValue" clearable placeholder="全部分类">
          <el-option
            v-for="item in partitionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select v-model="channelValue" clearable placeholder="全部渠道">
          <el-option
            v-for="item in channelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select v-model="serviceGroupValue" clearable placeholder="全部客服组">
          <el-option
            v-for="item in serviceGroupOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select v-model="serviceValue" clearable placeholder="全部客服">
          <el-option
            v-for="item in serviceOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="bottom-item-group">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
        <div class="search-item-group">
          <el-input placeholder="请输入关键词搜索" v-model="searchKeyword" clearable></el-input>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </div>
        <div class="bottom-button-group">
          <el-button @click="addDialogVisible=true" type="primary">添加工单</el-button>
          <el-button>批量修改状态</el-button>
          <el-button>导出工单</el-button>
        </div>
      </div>
    </div>
    <div class="middle-table-gorup">
      <el-table
        :header-cell-style="{'background-color':'#e6f1ff','height':'62px'}"
        ref="multipleTable"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        :data="tableData"
        style="width: 100%"
        v-loading="isLoading"
        fit
        :cell-style="cellStyle"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="id" label="工单ID" align="center">
          <template slot-scope="scope">
            <span style="color:#409EFF">{{scope.row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="工单标题" align="center"></el-table-column>
        <el-table-column prop="channel" label="工单渠道" align="center"></el-table-column>
        <el-table-column prop="state" label="工单状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="[scope.row.state === '处理中'? 'success':'danger']">{{scope.row.state}}</el-tag>
            <!--            <el-tag  type="success">{{scope.row.state}}</el-tag>-->
          </template>
        </el-table-column>
        <el-table-column prop="customerName" label="客户姓名" align="center"></el-table-column>
        <el-table-column prop="updateTime" label="最后更新时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="getDetail(scope.$index,tableData)"
              type="text"
              size="normal"
            >查看详情</el-button>
            <el-button
              @click.native.prevent="createOrder(scope.$index, tableData)"
              type="text"
              size="normal"
            >接单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom-pagination-group">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, prev, pager, next,sizes, jumper"
          :total="totalData"
        ></el-pagination>
      </div>
    </div>

    <el-dialog title="新建工单" top="9vh" :visible.sync="addDialogVisible" width="33%">
      <div class="add-dialog-style">
        <el-form ref="addOrderForm" :model="addOrderForm" label-position="left" label-width="120px">
          <el-form-item :rules="{ required: true, message: '请选择工单分类'}" label="工单分类" prop="workType">
            <el-select style="width:100%;" v-model="addOrderForm.workType" placeholder="请选择">
              <el-option label="分类一" value="分类一"></el-option>
              <el-option label="分类二" value="分类二"></el-option>
              <el-option label="分类三" value="分类三"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :rules="{ required: true, message: '请输入工单标题'}" label="工单标题" prop="title">
            <el-input style="width:100%;" v-model="addOrderForm.title" placeholder="请输入工单标题"></el-input>
          </el-form-item>
          <el-form-item
            :rules="{ required: true, message: '请输入工单描述'}"
            label="工单描述"
            prop="attachments"
          >
            <el-input
              type="textarea"
              :rows="6"
              v-model="addOrderForm.attachments"
              placeholder="请输入工单描述"
            ></el-input>
          </el-form-item>
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            :limit="3"
            :file-list="fileList"
          >
            <el-link
              type="primary"
              style="padding: 10px"
              :underline="false"
              @click="addFile"
            >添加附件（最多上传5个附件，单个文件最大50M)</el-link>
          </el-upload>
          <el-form-item label="抄送人" prop="cclist">
            <el-select style="width:100%;" v-model="addOrderForm.cclist" placeholder="请选择">
              <el-option label="王美美" value="王美美"></el-option>
              <el-option label="七尾" value="七尾"></el-option>
              <el-option label="李想" value="李想"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="优先级" prop="priority">
            <el-radio-group v-model="addOrderForm.priority">
              <el-radio label="低"></el-radio>
              <el-radio label="中"></el-radio>
              <el-radio label="高"></el-radio>
              <el-radio label="紧急"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="工单状态" prop="state">
            <el-select style="width:100%;" v-model="addOrderForm.state" placeholder="请选择">
              <el-option label="未分配" value="未分配"></el-option>
              <el-option label="待处理" value="待处理"></el-option>
              <el-option label="处理中" value="处理中"></el-option>
              <el-option label="已解决" value="已解决"></el-option>
              <el-option label="已关闭" value="已关闭"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="受理客服组" prop="customerServiceGroupId">
            <el-select
              style="width:100%;"
              v-model="addOrderForm.customerServiceGroupId"
              placeholder="请选择"
            >
              <el-option
                v-for="gd in groupData"
                :key="gd.groupId"
                :label="gd.groupName"
                :value="gd.groupId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="受理客服">
            <el-select
              style="width:100%;"
              v-model="addOrderForm.customerServiceId"
              placeholder="请选择"
            >
              <el-option
                v-for="cd in csData"
                :key="cd.customerServiceId"
                :label="cd.nickName"
                :value="cd.customerServiceId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属客户">
            <el-select style="width:100%;" v-model="addOrderForm.customerId" placeholder="请选择">
              <el-option
                v-for="cd in customerData"
                :key="cd.id"
                :label="cd.customerName"
                :value="cd.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="resetForm" type="text" size="normal">清空</el-button>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreateOrder">创建工单</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  name: "OrderItem",
  components: {},
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      }
    },
    totalData: {
      type: Number,
      default: 0
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      statusOptions: [
        {
          value: "未分配",
          label: "未分配"
        },
        {
          value: "待处理",
          label: "待处理"
        },
        {
          value: "处理中",
          label: "处理中"
        },
        {
          value: "已解决",
          label: "已解决"
        },
        {
          value: "已关闭",
          label: "已关闭"
        }
      ],
      statusValue: "",
      priorityOptions: [
        {
          value: "低",
          label: "低"
        },
        {
          value: "中",
          label: "中"
        },
        {
          value: "高",
          label: "高"
        },
        {
          value: "紧急",
          label: "紧急"
        }
      ],
      priorityValue: "",
      partitionOptions: [
        {
          value: "分类一",
          label: "分类一"
        },
        {
          value: "分类二",
          label: "分类二"
        },
        {
          value: "分类三",
          label: "分类三"
        }
      ],
      partitionValue: "",
      channelOptions: [
        {
          value: "手动录入",
          label: "手动录入"
        },
        {
          value: "即时聊天",
          label: "即时聊天"
        },
        {
          value: "客户管理",
          label: "客户管理"
        }
      ],
      channelValue: "",
      serviceGroupOptions: [
        {
          value: "客服组一",
          label: "客服组一"
        },
        {
          value: "客服组二",
          label: "客服组二"
        },
        {
          value: "客服组三",
          label: "客服组三"
        }
      ],
      serviceGroupValue: "",
      serviceOptions: [
        {
          value: "选项1",
          label: "王美美"
        },
        {
          value: "选项2",
          label: "七尾"
        },
        {
          value: "选项3",
          label: "李想"
        },
        {
          value: "选项4",
          label: "王志"
        }
      ],
      serviceValue: "",
      searchKeyword: "",
      addDialogVisible: false,
      addOrderForm: {},
      multipleSelection: [],
      isLoading: false,
      customerData: [],
      groupData: [],
      csData: [],
      totalData2: 0,
      currentPage2: 1,
      pageSize2: 10,
      fileList: []
      // flag1:true,
      // flag2:false
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleSizeChange(size) {
      this.pageSize = size;
      this.getPageData();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getPageData();
    },
    createOrder(index, tableData) {
      this.$message({
        message: "接单成功",
        type: "success"
      });
      tableData[index].state = "处理中";
    },
    getDetail(index, tableData) {
      this.$router.push({
        name: "order-detail",
        params: {
          data: tableData[index]
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    resetForm() {
      this.$refs.addOrderForm.resetFields();
    },
    handleCreateOrder() {
      this.$refs.addOrderForm.validate(valid => {
        if (valid) {
          this.addDialogVisible = false;
          api
            .createOrderAPI({
              workType: this.addOrderForm.workType,
              title: this.addOrderForm.title,
              attachments: this.addOrderForm.attachments,
              cclist: this.addOrderForm.cclist,
              priority: this.addOrderForm.priority,
              state: this.addOrderForm.state,
              customerServiceGroupId: this.addOrderForm.customerServiceGroupId,
              customerServiceId: this.addOrderForm.customerServiceId,
              customerId: this.addOrderForm.customerId,
              channel: "手动录入"
            })
            .then(res => {
              let { error, data } = res.data;
              if (error) {
                this.$message.error(data);
              } else {
                this.getPageData();
                this.$message({
                  message: "工单创建成功",
                  type: "success"
                });
              }
            });
        } else {
          this.$message.error("工单填写有误");
        }
      });
    },
    getPageData() {
      this.isLoading = true;
      api
        .getAllOrderAPI({
          page: this.currentPage,
          limit: this.pageSize
        })
        .then(res => {
          this.isLoading = false;
          let { error, data } = res.data;
          if (error) {
            this.$message.error("请求接口异常");
          } else {
            this.totalData = data.total;
            this.tableData = data.page;
          }
        });
    },
    addFile() {
      api.getFile(this.fileList).then(res => {
        let { error, data } = res.data;
        if (error) {
          this.$message.error(data);
        } else {
          this.$message({
            message: "附件上传成功",
            type: "success"
          });
        }
      });
    },
    handleSearch() {
      api
        .getOrder3API({
          page: this.currentPage,
          limit: this.pageSize,
          state: this.statusValue
          // priority: this.priorityValue,
          // workType: this.partitionValue,
          // channel:this.channelValue,
          // groupName: this.serviceGroupValue,
          // nickName:this.serviceValue
        })
        .then(res => {
          let { error, data } = res.data;
          if (error) {
            this.$message.error("请求接口异常");
          } else {
            this.totalData = data.total;
            this.tableData = data.page;
          }
        });
    },
    getCustomer() {
      api
        .getAllCustomerAPI({
          page: this.currentPage2,
          limit: this.pageSize2
        })
        .then(res => {
          let { error, data } = res.data;
          if (error) {
            this.$message.error("请求接口异常");
          } else {
            this.totalData2 = data.total;
            this.customerData = data.page;
          }
        });
    },
    getGroup() {
      api.getAllGroupAPI({}).then(res => {
        let { error, data } = res.data;
        if (error) {
          this.$message.error("请求接口异常");
        } else {
          this.groupData = data.page;
        }
      });
    },
    getCS() {
      api.getAllCustomerServiceAPI({}).then(res => {
        let { error, data } = res.data;
        if (error) {
          this.$message.error("请求接口异常");
        } else {
          this.csData = data.page;
        }
      });
    }
  },
  created() {
    this.getCustomer();
    this.getPageData();
    this.getGroup();
    this.getCS();
  },
  mounted() {}
};
</script>

<style scoped>
.top-item-group {
  padding-bottom: 20px;
}
.visitor-container {
  /* margin: 20px; */
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
}
.bottom-pagination-group {
  padding: 20px 20px 0;
  float: right;
}
.middle-table-gorup {
  margin-top: 20px;
  width: 100%;
  display: inline-block;
}
.el-select {
  width: 162px;
}
.el-input {
  width: 200px;
}
.top-select-group {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.bottom-item-group {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 15px;
}
.add-dialog-style {
  height: 440px;
  overflow: auto;
  padding: 20px 0 10px 20px;
  margin-top: 10px;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}
</style>
